<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        html,
        body {
            font-size: 14px;
            height: 100%;
            background-color: #f2f2f2;
        }

        header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 75px;
            color: #fff;
            text-align: left;
            background-color: #FBB40E;
        }

        header .back {
            position: relative;
            margin-top: 38px;
            width: 100%;
            height: 1.5rem;
            text-align: center;
        }

        .back img {
            position: absolute;
            left: 1rem;
            width: 1.5rem;
            height: 1.5rem;
            vertical-align: middle;
        }

        main {
            padding-top: 75px;
        }

        main .myhead {
            height: 20rem;
            text-align: center;
            padding-top: 5rem;
            box-sizing: border-box;
            background-color: #FBB40E;
        }

        .myhead .head {
            width: 7rem;
            height: 7rem;
            margin: auto;
            background-color: #fff;
            border-radius: 50%;
            overflow: hidden;
        }

        .myhead .head img {
            width: 100%;
            height: 100%;
        }

        .myhead span {
            color: #fff;
            font-weight: bold;
            font-size: 1.5rem;
            margin-top: 1rem;
        }

        main .loginbox {
            width: 90%;
            padding: 1rem 0.5rem;
            margin: 1rem auto 0;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 0.5rem;
            box-shadow: 0 0 0.1rem #FBB40E;
        }

        .loginbox-t {
            display: flex;
            justify-content: space-around;
            color: #2E7AFA;
        }

        .registerTable {
            padding: 1rem;
            box-sizing: border-box;
        }

        .registerTable li {
            padding: 0.5rem 0;
            height: 2rem;
            border-bottom: 1px solid #f2f2f2;
        }

        li.password,
        li.confirmpassword {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        li.password .showpwd {
            vertical-align: middle;
            width: 1.5rem;
            height: 1.5rem;
            display: none;
        }

        .registerBtn {
            margin-top: 1rem;
            width: 100%;
            height: 3rem;
            color: #fff;
            font-size: 1.2rem;
            border-radius: 0.5rem;
            background-color: #FBB40E;
        }
    </style>
</head>

<body>
    <header>
        <div class="back">
            <img src="../image/icon/back.png" alt="" onclick="api.closeWin()">
            <span>注册</span>
        </div>
    </header>
    <main>
        <div class="myhead">
            <div class="head">
                <img src="../image/icon/head.png" alt="">
            </div>
        </div>
        <div class="loginbox">
            <div class="loginbox-t">
                <div class="register active">注册</div>
            </div>
            <ul class="registerTable">
                <li class='uname'>
                    <input type="text" name="" value="" placeholder="请输入用户名">
                </li>
                <li class="password">
                    <input type="password" name="" value="" placeholder="请输入密码">
                    <img src="../image/icon/hidepwd.png" alt="" class="showpwd">
                </li>
                <li class="confirmpassword">
                    <input type="password" name="" value="" placeholder="请确认您的密码">
                </li>
                <li><button class="registerBtn">注册</button></li>
            </ul>
        </div>
    </main>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    apiready = function() {

    };

    $('.registerTable .password>input').bind('input propertychange', function() {
        if ($(this).val() != '' && $.trim($(this).val()).length != 0) {
            $('.showpwd').css('display', "block");
            $('.showpwd').click(function() {
                if ($(this).attr('src') == "../image/icon/hidepwd.png") {
                    $(this).attr('src', "../image/icon/showpwd.png");
                    $('.password input').attr('type', "text");
                } else {
                    $(this).attr('src', "../image/icon/hidepwd.png");
                    $('.password input').attr('type', "password");
                }
            })
        } else {
            $('.showpwd').css('display', "none");
        }
    })

    $('.registerBtn').click(function() {
        var username = $('.uname input').val();
        var password = $('.password input').val();
        var confirm = $('.confirmpassword input').val();
        if (!username) {
            api.toast({
                msg: '用户名不能为空',
                duration: 2000,
                location: 'bottom'
            });
            $('.uname input').focus()
            return
        }
        if (!password) {
            api.toast({
                msg: '密码不能为空',
                duration: 2000,
                location: 'bottom'
            });
            $('.password input').focus()
            return
        }
        if (!confirm) {
            api.toast({
                msg: '确认密码不能为空',
                duration: 2000,
                location: 'bottom'
            });
            $('.confirmpassword input').focus()
            return
        }
        if (password != confirm) {
            api.toast({
                msg: '两次输入密码不一致',
                duration: 2000,
                location: 'bottom'
            });
        } else {
            api.ajax({
                url: 'http://122.112.138.133/wangt/jianzhi/queryUser.com',
                method: 'post',
                data: {
                    body: {
                        "data": {
                            username: username
                        }
                    }
                }
            }, function(ret, err) {
                if (ret) {
                    if (ret.data.total == 0) {
                        api.ajax({
                            url: 'http://122.112.138.133/wangt/jianzhi/addUser.com',
                            method: 'post',
                            data: {
                                body: {
                                    'tbname': 'userinfo',
                                    'username': username,
                                    'password': password
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                api.toast({
                                    msg: '注册成功',
                                    duration: 2000,
                                    location: 'bottom'
                                });
                                setTimeout(function(){
                                  api.closeWin({
                                      name: 'register'
                                  });
                                },1000)
                                $('.uname input').val('');
                                $('.password input').val('');
                                $('.confirmpassword input').val('');
                            }
                        });

                    } else {
                        api.toast({
                            msg: '该用户名已被注册',
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                }
            });

        }
    })
</script>

</html>
